import React, { useEffect, useState, useContext } from "react";
import { useSearchParams } from 'react-router-dom'
import Nav from "../../commonents/Nav";
import { Layout, Button } from 'antd'
import { CaretRightOutlined } from '@ant-design/icons';
import '../../assets/css/detailPage/songsDetail.scss'
import { indexGetLyric, indexGetSong, indexLikeSong } from '../../api/indexApi'

// context
// import { ValueContext } from '../../App.js';

import Comments from '../../commonents/comments/Comments'

const { Content, Sider } = Layout

function SongsDetail() {


    // 使用useContext钩子函数获取ValueContext中的value和onValueChange
    // const { onValueChange } = useContext(ValueContext);

    // // 定义handleChange回调函数，用于输入框内容改变时更新value的值
    // const handleChange = (id) => {
    //     onValueChange(id)
    // };




    // 歌曲详情数据
    let [getSong, setGetSong] = useState([])

    // 歌词数据
    let [getLyric, setGetLyric] = useState([])

    // 贡献滚动歌词
    let [luser, setLuser] = useState([])

    // 歌词展开收缩
    let [active, setActive] = useState([false])

    // 相似歌曲
    let [likeSong, setLikeSong] = useState([])

    const [searchParams] = useSearchParams();
    const ids = searchParams.get('id');

    // console.log(ids);

    // 获取歌曲详情
    useEffect(() => {
        indexGetSong(ids).then((res) => {
            // console.log(ids);
            // console.log(res.data.songs)
            if (res.data.songs.length > 0) {
                setGetSong(res.data.songs)
            }
        })
    }, [ids])

    // 歌词转换
    function parseLyrics(lyrics) {
        const regex = /\[.*?\]/g; // 匹配 [] 及其内容的正则表达式
        const lyricArray = lyrics.split('\n'); // 将歌词字符串按行分割成数组
        const parsedLyrics = [];

        for (let i = 0; i < lyricArray.length; i++) {
            // 对于每一行歌词，将其中的 [] 及其内容用空字符串替换掉
            const parsedLine = lyricArray[i].replace(regex, '');
            parsedLyrics.push({
                id: i,
                item: <p key={i}>{parsedLine}</p>
            }); // 将解析后的文本节点添加到数组中
        }

        return parsedLyrics; // 返回包含所有解析后文本节点的数组
    }

    // 获取歌词
    useEffect(() => {
        setActive(false)
        setLuser([])
        indexGetLyric(ids).then((res) => {
            setGetLyric(parseLyrics(res.data.lrc.lyric))
            if (res.data.lyricUser) {
                setLuser(res.data.lyricUser.nickname)
            }
            // console.log(luser)
            // }
        })
    }, [ids])

    // 展开收起
    function handerActive() {
        setActive(!active)
    }

    // 获取相似歌曲
    useEffect(() => {
        indexLikeSong(ids).then((res) => {
            // console.log(res.data.songs)
            setLikeSong(res.data.songs)
        })
    }, [ids])

    return (<div className="songsDetailContent">
        <Nav></Nav>
        <Layout >
            <Content style={{}}>
                {
                    getSong.map((s) => {
                        // console.log(s.id);
                        let ar = s.ar.map((a, i) => { return <span className="linka" key={i}>{a.name}</span> })
                        // console.log(ar);
                        return <div key={s.id} className="songsheader">
                            {/* 图片 */}
                            <div className="songimg"><img src={s.al.picUrl} /></div>
                            <div className="songsmain">
                                {/* 歌曲信息 */}
                                <h1 className="title">{s.name}{s.alia.length > 0 ? (<span> - {s.alia[0]}</span>) : (<></>)}</h1>
                                <p className="art"><span style={{ color: '#999999' }}>歌手：</span><span>{ar}</span></p>
                                <p className="abm"><span style={{ color: '#999999' }}>所属专辑：</span><span className="linka">{s.al.name}</span></p>

                                {/* 播放 */}
                                <Button  className="play" icon={<CaretRightOutlined />}>播放</Button>
                                {/* 收藏分享下载 */}
                                <div className="toolbtn">
                                    <span className=" shoucang">
                                        <svg t="1678174921699" viewBox="0 0 1179 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8750"><path d="M142.31918 540.267127l350.13559 373.653781c54.296613 63.852817 139.806023 63.883844 195.033436-1.054906l362.204951-388.670672c42.661625-48.866952 65.466202-112.130263 65.466203-182.902021a279.239726 279.239726 0 0 0-501.018122-169.653647 30.99561 30.99561 0 0 1-25.534922 12.131415 30.99561 30.99561 0 0 1-25.503895-12.131415A279.239726 279.239726 0 0 0 62.053272 341.293309c0 72.850542 28.792718 144.242832 77.411458 195.498835 1.054906 1.116959 1.985705 2.264944 2.85445 3.474983z m-54.606879 31.926409A349.732244 349.732244 0 0 1 0 341.293309C0 152.806494 152.806184 0.00031 341.292999 0.00031c95.065613 0 183.708713 39.155615 247.313317 106.111096A340.486306 340.486306 0 0 1 835.95066 0.00031c188.486815 0 341.292999 152.806184 341.292999 341.292999 0 80.793361-25.069522 154.636755-72.198982 213.463257-1.147986 1.923651-2.482131 3.754223-4.095516 5.491715l-5.181449 5.553768c-2.699317 3.071637-5.491715 6.112247-8.315138 9.090804-0.620533 0.620533-1.210039 1.241065-1.861598 1.799545L733.810974 954.069375c-79.055869 93.048882-209.553901 93.017855-287.616918 1.147985L90.783938 576.040839a31.243823 31.243823 0 0 1-3.102664-3.847303z" p-id="8751"></path></svg>
                                        收藏
                                    </span>
                                    <span className="share">
                                        <svg t="1678175020371" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10993"><path d="M768.73106 703.537712c-35.606921 0-67.945574 14.793214-91.167479 38.359147l-309.109357-171.670082c9.116748-17.545439 14.621199-37.155048 14.621199-58.312783 0-12.55703-2.408198-24.426004-5.676466-35.950949l304.63699-189.215522c22.705863 20.469679 52.464304 33.198723 85.146985 33.198723 70.525785 0 127.978498-57.452713 127.978498-127.978498S837.708718 63.989249 767.182933 63.989249s-127.978498 57.452713-127.978498 127.978498c0 14.621199 2.92424 28.382328 7.396607 41.455401L344.716278 420.746514c-23.049891-22.705863-54.700487-36.983034-89.791366-36.983034-70.525785 0-127.978498 57.452713-127.978498 127.978498s57.452713 127.978498 127.978498 127.978498c25.630102 0 49.540064-7.740635 69.493701-20.813707l321.150344 178.378633c-3.096254 11.008903-5.160423 22.18982-5.160423 34.058794 0 70.525785 57.452713 127.978498 127.978498 127.978498s127.978498-57.452713 127.978498-127.978498S839.256845 703.537712 768.73106 703.537712zM767.182933 127.978498c35.262893 0 63.989249 28.726356 63.989249 63.989249s-28.726356 63.989249-63.989249 63.989249-63.989249-28.726356-63.989249-63.989249S731.92004 127.978498 767.182933 127.978498zM191.107677 511.913993c0-35.262893 28.726356-63.989249 63.989249-63.989249s63.989249 28.726356 63.989249 63.989249-28.726356 63.989249-63.989249 63.989249S191.107677 547.176886 191.107677 511.913993zM768.73106 895.505459c-35.262893 0-63.989249-28.726356-63.989249-63.989249s28.726356-63.989249 63.989249-63.989249 63.989249 28.726356 63.989249 63.989249C832.720309 866.951117 803.993953 895.505459 768.73106 895.505459z" p-id="10994"></path></svg>
                                        分享
                                    </span>
                                    <span className="download">
                                        <svg t="1678174667005" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6634"><path d="M808.192 246.528a320.16 320.16 0 0 0-592.352 0A238.592 238.592 0 0 0 32 479.936c0 132.352 107.648 240 240 240h91.488a32 32 0 1 0 0-64H272a176.192 176.192 0 0 1-176-176 175.04 175.04 0 0 1 148.48-173.888l19.04-2.976 6.24-18.24C305.248 181.408 402.592 111.936 512 111.936a256 256 0 0 1 242.208 172.896l6.272 18.24 19.04 2.976A175.04 175.04 0 0 1 928 479.936c0 97.024-78.976 176-176 176h-97.28a32 32 0 1 0 0 64h97.28c132.352 0 240-107.648 240-240a238.592 238.592 0 0 0-183.808-233.408z" p-id="6635"></path><path d="M649.792 789.888L544 876.48V447.936a32 32 0 0 0-64 0V876.48l-106.752-87.424a31.968 31.968 0 1 0-40.544 49.504l159.04 130.24a32 32 0 0 0 40.576 0l158.048-129.44a32 32 0 1 0-40.576-49.472z" p-id="6636"></path></svg>
                                        下载
                                    </span>
                                    <span>
                                        <svg t="1678435755601" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2864"><path d="M512.6 992c-18 0-36.2-1-54.5-3C254.8 966.9 61.4 776.9 35.9 574.2c-18.8-149.5 31-295.9 136.7-401.6C278.2 66.9 424.7 17 574.2 35.9 776.6 61.4 966.5 254.5 989 457.5c12.1 109.5-11.8 215.6-69.1 307.7 12.1 44.1 46 161 46 161 3.2 11.2 0.1 23.3-8.1 31.5s-20.3 11.4-31.5 8.1c0 0-117.2-33.9-160.5-46.3-76.7 47.9-163.2 72.5-253.2 72.5z m-0.3-896c-110.5 0-215.6 43-294.5 121.8C126.2 309.4 83 436.4 99.4 566.2 121.1 738.7 292 906.6 465.1 925.4c97.8 10.7 192.3-11.7 273.5-64.5 10.6-6.9 23.9-8.8 36.4-5.3 19.3 5.5 71.9 20.7 113.3 32.7-12-41.7-27.2-94.9-32.6-115-3.2-12.1-1.1-25 5.8-35.5 52.5-81 74.6-175.5 63.8-273.2-19-172.9-186.9-343.5-359.1-365.2-18-2.3-36.1-3.4-53.9-3.4z m261.2 818.5z m141.7-142.1c0 0.1-0.1 0.1-0.1 0.2 0.1 0 0.1-0.1 0.1-0.2z" p-id="2865"></path><path d="M336 544c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.6 48-48 48zM528 544c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.6 48-48 48zM720 544c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.6 48-48 48z" p-id="2866"></path></svg>
                                        评论
                                    </span>
                                </div>
                            </div>
                        </div>
                    })
                }
                {/* 歌词渲染 */}
                <p className="lyricTitle">歌词</p>
                <div className={active ? ("lyricBox") : ("lyricBox isHidden")}>
                    {
                        getLyric.map((l) => {
                            return <div key={l.id}>
                                {l.item}
                            </div>
                        })
                    }
                </div>
                <button className="c-tx" onClick={handerActive}>{active ? ("[收起]") : ("[展开]")}</button>
                {/* 贡献滚动歌词 */}
                {luser.length > 0 ? (<p className="song-gx" title={luser}>贡献滚动歌词：<span className="linka">{luser}</span></p>) : (<></>)}

                <Comments></Comments>
            </Content>
            <Sider style={{}}>
                <div className="songsLikeContainer">
                    <p className="title">相似歌曲</p>
                    {
                        likeSong.map((k, i) => {
                            return <div key={i} className="likeItem">
                                {/* <div className="likeImg"><img src={k.picUrl} /></div> */}
                                <div>
                                    <div className="likesongs">
                                        <p title={k.name} className="linka">{k.name}</p>
                                        <div>
                                            <span title="播放"><svg t="1678454320292" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1605"><path d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m0 981.333333C253.866667 981.333333 42.666667 770.133333 42.666667 512S253.866667 42.666667 512 42.666667s469.333333 211.2 469.333333 469.333333-211.2 469.333333-469.333333 469.333333z" p-id="1606"></path><path d="M672 441.6l-170.666667-113.066667c-57.6-38.4-106.666667-12.8-106.666666 57.6v256c0 70.4 46.933333 96 106.666666 57.6l170.666667-113.066666c57.6-42.666667 57.6-106.666667 0-145.066667z" p-id="1607"></path></svg></span>
                                            <span title="收藏"><svg t="1678174921699" viewBox="0 0 1179 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8750"><path d="M142.31918 540.267127l350.13559 373.653781c54.296613 63.852817 139.806023 63.883844 195.033436-1.054906l362.204951-388.670672c42.661625-48.866952 65.466202-112.130263 65.466203-182.902021a279.239726 279.239726 0 0 0-501.018122-169.653647 30.99561 30.99561 0 0 1-25.534922 12.131415 30.99561 30.99561 0 0 1-25.503895-12.131415A279.239726 279.239726 0 0 0 62.053272 341.293309c0 72.850542 28.792718 144.242832 77.411458 195.498835 1.054906 1.116959 1.985705 2.264944 2.85445 3.474983z m-54.606879 31.926409A349.732244 349.732244 0 0 1 0 341.293309C0 152.806494 152.806184 0.00031 341.292999 0.00031c95.065613 0 183.708713 39.155615 247.313317 106.111096A340.486306 340.486306 0 0 1 835.95066 0.00031c188.486815 0 341.292999 152.806184 341.292999 341.292999 0 80.793361-25.069522 154.636755-72.198982 213.463257-1.147986 1.923651-2.482131 3.754223-4.095516 5.491715l-5.181449 5.553768c-2.699317 3.071637-5.491715 6.112247-8.315138 9.090804-0.620533 0.620533-1.210039 1.241065-1.861598 1.799545L733.810974 954.069375c-79.055869 93.048882-209.553901 93.017855-287.616918 1.147985L90.783938 576.040839a31.243823 31.243823 0 0 1-3.102664-3.847303z" p-id="8751"></path></svg></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        })
                    }
                </div>
            </Sider>
        </Layout>
    </div>);
}

export default SongsDetail;